<template>
    <el-dialog :model-value="dialogVisible" title="历史版本" width="1200px" :before-close="handleClose" append-to-body>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="序号" width="80" prop="number"> </el-table-column>
            <el-table-column prop="createTime" label="时间" width="180" />
            <el-table-column prop="budgetVersion" label="版本号" />
            <el-table-column prop="updateUser" label="操作人" />
            <el-table-column prop="totalAmount" label="当前预算合计" />
            <el-table-column prop="totalAmountChange" label="当前预算变化" />
            <el-table-column prop="budgetStatus" label="状态">
                <template #default="scope">
                    <p class="state" :style="{ color: scope.row.budgetStatus == 'AUDITING' ? 'red' : '#3d3d3d' }">
                        {{ statusText(STATUS_LIST, scope.row.budgetStatus) }}</p>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="操作" width="180">
                <template #default="scope">
                    <el-button @click="deleteHisory(scope.row.id)" link
                        :disabled="!['CHANGING', 'DRAFT'].includes(scope.row.budgetStatus)">删除</el-button>
                    <el-button @click="rowClick(scope.row)" link>查看预算</el-button>
                </template>
            </el-table-column>
        </el-table>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import api from "@/api/index";
import dayjs from 'dayjs'
import { STATUS_LIST } from './config'
import { statusText } from '@/util/index'
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter()

const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    budgetNo: {
        type: String,
        default: ''
    },
    info: {
        type: Object,
        default: () => { }
    }

})




const tableData = ref([])

const emit = defineEmits(['handleClose','emit'])


onMounted(() => {
    getList()
});


const getList = () => {
    api.budgetManger.budgetMangerLookHistory({ budgetNo: props.budgetNo }).then(res => {
        console.log(res[1])
        res.forEach((item, index) => {
            item['createTime'] = dayjs(item['createTime']).format('YYYY-MM-DD HH:mm:ss')
            if (res.length > (index + 1)) {
                let result = Number(item['totalAmount']) - (Number(res[index + 1]['totalAmount'])).toFixed(2)
                item['totalAmountChange'] = Number(result > 0 ? '+' + result : result).toFixed(2)
            }
        });
        tableData.value = res
    })
}

// 删除历史
const deleteHisory = (id) => {
    ElMessageBox.confirm(
        '您确定要进行删除操作吗?',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            api.budgetManger.budgetMangerDel({ id }).then(res => {
                getList()
                emit('update')
                ElMessage.success('操作成功')
            })
        })

}
// 关闭
const handleClose = () => {
    tableData.value = []
    emit('handleClose')

}

const rowClick = (data) => {
    console.log(data, 'look')
    router.push({
        name: 'staffingEdit',
        query: { id: data.id, type: 'look', centerName: props.info.centerName }
    })
    emit('handleClose')
}

</script>
<style lang="scss" scoped>
.w100p {
    width: 100%;
}

.prompt {
    margin: 0 20px;
    font-size: 14px;
}
</style>
